<template>
  <div>
    <van-nav-bar
      title="我的房源"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <van-list v-if="isShow">
      <houses-item
        v-for="(item, index) in myRentHouses"
        :key="index"
        :houseInfo="item"
      ></houses-item>
    </van-list>
    <div v-else class="to-rent">
      <van-image
        width="100"
        height="100"
        src="@/assets/微信图片_20220531095952.jpg"
      />
      <span
        >您还有发布的房源，<span @click="toRent" style="color: #33be85"
          >点击前往发布房源</span
        ></span
      >
    </div>
  </div>
</template>
<script>
import { getMyRentHousesApi } from "@/api";
import HousesItem from "@/components/HousesItem.vue";
export default {
  name: "MyRentHouses",
  data() {
    return {
      myRentHouses: [],
    };
  },
  components: { HousesItem },
  computed: {
    isShow() {
      return this.myRentHouses.length > 0;
    },
  },
  methods: {
    async getMyRentHouses() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      try {
        const res = await getMyRentHousesApi();
        console.log(res);
        this.myRentHouses = res.data.body;
        this.$toast.success({
          message: "加载成功",
        });
      } catch (error) {
        this.$toast.fail({
          message: "加载失败",
        });
      }
    },
    toRent() {
      this.$router.push("/rent");
    },
  },
  created() {
    this.getMyRentHouses();
  },
};
</script>
<style lang="less" scoped>
:deep(.to-rent) {
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 14px;
  .van-image {
    margin-left: 148px;
    margin-bottom: 20px;
    margin-top: 20px;
  }
}
</style>
